import { Button, InputNumber, Radio, Space, Table } from 'antd';
import { useState, useEffect } from 'react'
import LittleTitle from '../../../../../../common/LittleTitle';
import useMap from '../../hooks/useMap';
import { drawCircle, geomToWkt, wktToGeom } from '../../../../../../../utils/helper/mapHelper';
import CztApi from '../../../../../../../utils/apis/CztApi';
import JzzyApi from '../../../../../../../utils/apis/JzzyApi';
import { fromCircle } from 'ol/geom/Polygon';
import DetailList from './DetailList';
import rangeDisplayIcon from '../../../../pages/Jcyj/rangeDisplayIcon';
export default function JudgeAnalysis(props) {
    const [radius, setRadius] = useState();
    const [ypType, setYpType] = useState(1);
    const { item } = props;
    const [yxList, setYxList] = useState();
    const [circle, setCircle] = useState();

    const map = useMap();
    useEffect(() => {
        if (ypType && map && radius && item) {
            const center = wktToGeom(item.geom).getCoordinates();
            const circle = drawCircle(map, center, radius);
            setCircle(circle);
            if (ypType === 1) {
                CztApi.listByPolygon(fromCircle(circle)).then(resp => {
                    setYxList(resp.data)
                    const data = resp.data.map(item => ({ name: item?.name }));
                    rangeDisplayIcon(data, circle, map, 'czt', 'nowkt')
                })
            } else {
                JzzyApi.listByPolygon(fromCircle(circle)).then(resp => {
                    setYxList(resp.data)
                    const data = resp.data.map(item => ({ name: item?.name }));
                    rangeDisplayIcon(data, circle, map, 'jzzy', 'nowkt')
                })
            }
            return () => {
                const allLayers = map.getLayers().getArray();
                [...allLayers].forEach(l => {
                    if (l?.get("layerName") === 'rangeDisplayIcon') {
                        map.removeLayer(l);
                    }
                })
            }
        }
    }, [ypType, map, radius, item])


    return <div className='fill layout-v'>
        <LittleTitle >
            <div className='layout-h center' style={{
                justifyContent: "space-between",
                paddingRight: 8
            }}>
                <div>研判分析</div>
                <div>
                    <Radio.Group size="small" value={ypType} onChange={e => {
                        setYpType(e.target.value)
                    }} buttonStyle="solid">
                        <Radio.Button value={1}>影响范围</Radio.Button>
                        <Radio.Button value={2}>救援保障</Radio.Button>
                    </Radio.Group>
                </div>
            </div>
        </LittleTitle><div className='fill h0 layout-v' style={{
            padding: 12
        }}>
            <Space style={{
                whiteSpace: 'nowrap'
            }}>
                <Radio.Group size='small' value={radius} onChange={e => {
                    setRadius(e.target.value)
                }} buttonStyle="solid">
                    <Radio.Button value={5}>5km</Radio.Button>
                    <Radio.Button value={10}>10km</Radio.Button>
                    <Radio.Button value={15}>15km</Radio.Button>
                    <Radio.Button value={20}>20km</Radio.Button>
                </Radio.Group>

                <InputNumber size='small' placeholder='其它数值' addonAfter={"km"} style={{
                    width: 120
                }} onChange={value => {
                    setRadius(value)
                }} />
            </Space>
            <div className='fill' style={{
                paddingTop: 12
            }}>

                <Table size='small' bordered columns={[{
                    title: '影响机构',
                    ellipsis: true,
                    width: 180,
                    dataIndex: 'name'
                }, {
                    title: '影响数量',
                    dataIndex: 'count',
                    align: "right",
                    render: (text) => {
                        return text + '处'
                    }
                }, {
                    render: (text, record) => {
                        return <Button type="link" size="small" style={{
                            padding: 0
                        }} onClick={() => {
                            if (circle) {
                                map.dispatchEvent({
                                    type: "detail.show2",
                                    title: record.name,
                                    component: <DetailList wkt={geomToWkt(fromCircle(circle))} type={ypType === 1 ? 'czt' : 'jzzy'} cztxl={record.name} jzzyxl={record.name} />
                                })
                            }
                        }}>详情</Button>
                    }
                }]}
                    showHeader={false}
                    dataSource={yxList} />
            </div>
        </div>
    </div>;
}